<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>animate动画</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            background-color: rgb(22, 186, 157);
        }

        header {
            width: 50%;
            margin: 100px auto;
        }

        .search {
            height: 50px;
            border: 1px solid white;
            /* 水平阴影位置，垂直阴影位置，模糊距离，颜色 */
            box-shadow: 0px 0px 10px #fff;

            /* 为动画准备的相对定位 */
            position: relative;
            /* animation:动画名称 动画时间 动画曲线 停留在最后一帧 */
            animation: move_search 1s linear forwards;
        }

        /* 最简单的移动，也可以百分百来设置进度 */
        @keyframes move_search {
            from {
                left: -200%;
            }

            to {
                left: 0;
            }
        }

        .search div {
            color: white;
            padding-left: 10px;
            /* 为了居中 */
            line-height: 50px;

            /* 为了动画而设置 */
            width: 0;
            height: 50px;
            overflow: hidden;

            /* animation:动画名称 动画时间 8帧显示完 停留在最后一帧 延迟1s显示 */
            animation: show_font 1.5s steps(8) forwards 1s;
        }

        @keyframes show_font {
            0% {
                width: 0;
            }

            50% {
                width: 75px;
            }

            100% {
                width: 130px;
            }
        }
    </style>
</head>

<body>
    <header>
        <div class="search">
            <div>公众号：逸鹏说道</div>
        </div>
    </header>
</body>

</html>